<template>
  <div id="box">
    <div class="smallbox">
      <div class="left">
        <el-input v-model="input" placeholder="请输入内容"></el-input>
        <!-- <el-button type="primary" @click="tables()">查找</el-button> -->
      </div>
      <div class="right">
        <el-button type="primary" @click="dialogFormVisible = true"
          >新增</el-button
        >
        <!-- <el-button type="primary">Excel下载模板</el-button> -->
        <el-button type="primary" @click="exceladd = true">Excel新增</el-button>
      </div>
    </div>
    <el-dialog title="新增信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="账号">
          <el-input v-model="form.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="form.sex" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="form.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="班级">
          <!-- <el-input v-model="form.class" autocomplete="off"></el-input> -->
          <el-select v-model="form.region" placeholder="请选择发送班级">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="Excel新增" :visible.sync="exceladd">
      <el-form>
        <el-upload
          :action="'none'"
          :auto-upload="false"
          drag
          ref="upload"
          :on-change="onChange"
          :on-remove="onRemove"
          multiple
          :limit="limit"
          show-file-list
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传一个文件。</div>
        </el-upload>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="exceladd = false">取 消</el-button>
        <el-button type="primary" @click="submitUpload(), (exceladd = false)"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <div class="result">
      <div class="title">人员记录</div>
      <div class="recording">
        <el-table :data="tables" stripe style="width: 100%">
          <el-table-column prop="account" label="账号"> </el-table-column>
          <el-table-column prop="name" label="姓名"> </el-table-column>
          <el-table-column
            prop="address"
            label="地址"
            width="250"
          ></el-table-column>
          <el-table-column prop="sex" label="性别"></el-table-column>
          <el-table-column prop="age" label="年龄"></el-table-column>
          <el-table-column prop="class" label="班级"></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click.native.prevent="
                  (dialogFormVisible1 = true), change(scope.row)
                "
                >编辑</el-button
              >
              <el-button
                @click.native.prevent="deleteRow(scope.row)"
                type="text"
                size="small"
              >
                移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog title="编辑信息" :visible.sync="dialogFormVisible1">
        <el-form :model="form1">
          <el-form-item label="账号">
            <el-input
              v-model="form1.account"
              autocomplete="off"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="form1.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="form1.address" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="form1.sex" placeholder="请选择性别">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="form1.age" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="班级">
            <!-- <el-input v-model="form.class" autocomplete="off"></el-input> -->
            <el-select v-model="form1.region" placeholder="请选择发送班级">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="baocun()">保存</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  created: function () {
    this.getIndex();
  },
  computed: {
    tables() {
      const input = this.input;
      console.log(this.input);
      return this.tableData.filter((item) => {
        return item.name.includes(input);
      });
    },
  },
  methods: {
    getIndex() {
      this.$api({
        url: "/index/usercount",
        method: "get",
        success: (data) => {
          data.forEach((value) => {
            var listdata = {
              account: value.count,
              name: value.name,
              class: value.class,
              sex: value.sex,
              age: value.age,
              address: value.address,
            };
            this.tableData.push(listdata);
            listdata = "";
          });
        },
      }),
        this.$api({
          url: "/index/classtype",
          method: "get",
          success: (data) => {
            console.log(data);
            this.options = [];
            data.forEach((value) => {
              var listdata = {
                value: value.class,
                label: value.class + "班",
              };
              this.options.push(listdata);
              listdata = "";
            });
          },
        });
    },
    add() {
      if (!this.form.account) {
        alert("账号不能为空！");
      } else if (!this.form.name) {
        alert("姓名不能为空！");
      } else if (!this.form.address) {
        alert("地址不能为空！");
      } else if (!this.form.sex) {
        alert("性别不能为空！");
      } else if (!this.form.age) {
        alert("年龄不能为空！");
      } else if (!this.form.region) {
        alert("班级不能为空！");
      } else {
        let data = {
          count: this.form.account,
          name: this.form.name,
          address: this.form.address,
          sex: this.form.sex,
          age: this.form.age,
          classno: this.form.region,
        };
        console.log(data);
        this.$api({
          url: "/index/add_people",
          method: "post",
          data: data,
          success: (data) => {
            alert(data);
            this.form.account = "";
            this.form.name = "";
            this.form.address = "";
            this.form.sex = "";
            this.form.age = "";
            this.form.region = "";
            this.dialogFormVisible = false;
            this.tableData = [];
            this.getIndex();
          },
        });
      }
    },
    //删除
    deleteRow(row) {
      console.log(row);
      this.$api({
        url: "/index/del_people",
        method: "post",
        data: { count: row.account },
        success: (data) => {
          alert(data);
          this.tableData = [];
          this.getIndex();
        },
      });
    },
    change(row) {
      console.log(row);
      (this.form1.account = row.account),
        (this.form1.name = row.name),
        (this.form1.address = row.address);
      (this.form1.sex = row.sex),
        (this.form1.age = row.age),
        (this.form1.region = row.class + "班");
    },
    baocun() {
      if (!this.form1.name) {
        alert("姓名不能为空！");
      } else if (!this.form1.address) {
        alert("地址不能为空！");
      } else if (!this.form1.sex) {
        alert("性别不能为空！");
      } else if (!this.form1.age) {
        alert("年龄不能为空！");
      } else if (!this.form1.region) {
        alert("班级不能为空！");
      } else {
        let data = {
          count: this.form1.account,
          name: this.form1.name,
          address: this.form1.address,
          sex: this.form1.sex,
          age: this.form1.age,
          classno: this.form1.region,
        };
        console.log(data);
        this.$api({
          url: "/index/bianji_people",
          method: "post",
          data: data,
          success: (data) => {
            alert(data);
            // this.dialogFormVisible = false;
            this.tableData = [];
            this.getIndex();
          },
        });
      }
    },
    onChange(file, filelist) {
      //file.raw 才是真实的 file 对象
      this.fileList.push(file.raw);
    },
    //文件列表移除文件时的钩子
    onRemove(file, fileList) {
      //file.raw 才是真实的 file 对象
      this.fileList.splice(this.fileList.indexOf(file.raw), 1);
    },
    //上传文件
    submitUpload() {
      console.log("提交文件");
      let formData = new FormData();
      // 向 formData 对象中添加文件
      this.fileList.forEach((file) => {
        formData.append("file", file);
      });

      //设置文件保存路径
      formData.append("path", this.path);
      console.log(formData);
      console.log(this.path);
      this.$api({
        // url: "/index/uploadxlsx",
        url: "/index/pubFile",
        // method:"get",
        method: "post",
        data:formData,
        success: (data) => {
          alert(data);
          this.tableData = [];
          this.getIndex();
        },
      });
    },
  },
  data() {
    return {
      limit: 1,
      options: [],
      value: "",
      input: "",
      tableData: [],
      exceladd: false,
      fileList: [],

      //设置文件保存的路径，作为参数传递进来
      path: "./upload/",
      dialogFormVisible: false,
      form: {
        account: "",
        name: "",
        address: "",
        sex: "",
        age: "",
        region: "",
      },
      dialogFormVisible1: false,
      form1: {
        account: "",
        name: "",
        address: "",
        sex: "",
        age: "",
        region: "",
      },
    };
  },
};
</script>


<style lang="scss" scoped>
#box {
  border: 2px solid #ccc;
  .smallbox {
    display: flex;
    justify-content: space-between;
    margin: 50px 30px;
    .left {
      .el-input {
        margin-right: 10px;
        width: 300px;
      }
    }
  }
  .result {
    padding-bottom: 50px;
    .title {
      font-size: 20px;
      color: #ccc;
      transition: all 0.5s ease;
      text-align: center;
      padding: 8px;
      &::before {
        content: "";
        display: inline-block;
        height: 2px;
        width: 50px;
        background: #ccc;
        position: relative;
        top: -5px;
        transition: all 0.5s ease;
      }
      &::after {
        content: "";
        display: inline-block;
        height: 2px;
        width: 50px;
        background: #ccc;
        position: relative;
        top: -5px;
        transition: all 0.5s ease;
      }
    }
    &:hover .title {
      color: skyblue;
      transition: all 0.5s ease;
    }
    &:hover .title::before {
      width: 200px;
      background: skyblue;
      transition: all 0.5s ease;
    }
    &:hover .title::after {
      width: 200px;
      background: skyblue;
      transition: all 0.5s ease;
    }
  }
  padding-bottom: 20px;
}
.el-dialog {
  .el-form {
    .el-input {
      width: 400px;
    }
  }
}
</style>
